<template>
  <div id="tree" ref="tree"></div>
</template>

<script>

import FamilyTree from '@balkangraph/familytree.js'

export default {

  name: 'tree',
  data() {
    return {
      nodes: [
        { id: 1, pids: [2], name: "毛福梅",荣誉:"",生平:"6666",gender: "female", img: "https://img1.baidu.com/it/u=1051435906,113422395&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=574"  },
        { id: 2, pids: [1], name: "廖钟堂", gender: "male", img: "https://img2.baidu.com/it/u=871384074,2973299943&fm=253&fmt=auto&app=138&f=JPEG?w=446&h=478" },
        { id: 3, mid: 1, fid: 2, name: "蒋经国", gender: "male", img: "https://img0.baidu.com/it/u=1685187632,1011141091&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=387" },
        { id: 4, mid: 1, fid: 2, name: "蒋纬国", gender: "male", img: "https://img0.baidu.com/it/u=1866174012,3651246692&fm=253&fmt=auto&app=138&f=JPEG?w=348&h=480"  },
      ]
    }
  },


  methods: {
    mytree: function(domEl, x) {
      this.family = new FamilyTree (domEl, {
        nodes: x,
        nodeBinding: {
          field_0: "name",
          img_0: "img",
          sp_0:"生平"
        },
        nodeTreeMenu: true,
      });
    }
  },
  mounted(){
    this.mytree(this.$refs.tree, this.nodes)
  }
}





</script>

<style scoped>
</style>






<style scoped>

.window {
    width: 100%;
    height: 100vh;
}

</style>
